<template>
  <div class="train">
    <div class="search-box">
      <div class="destination">
        <div class="go-box">
          <div>出发城市</div>
          <el-input v-model.trim="goAddress" placeholder="出发城市"></el-input>
        </div>
        <span class="icon"
          ><el-icon @click="addressExchange"><Refresh /></el-icon
        ></span>
        <div class="arrive-box">
          <div>到达城市</div>
          <el-input v-model.trim="arriveAddress" placeholder="到达城市"></el-input>
        </div>
      </div>
      <div class="time">
        <div>出发日期</div>
        <el-date-picker
          v-model="trainDate"
          type="date"
          placeholder="选择出发日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          :popper-class="'train-pop'"
          :teleported="false"
          :clearable="false"
          :disabled-date="pickerOptions"
        >
          <template #default="cell">
            <div class="cell" :class="{ current: cell.isCurrent }">
              <span class="text">{{ cell.text }}</span>
              <span v-if="isHoliday(cell)" class="holiday" />
              <span v-if="isReserve(cell) > 15 && isReserve(cell) < 30" class="reserve">预约</span>
            </div>
          </template>
        </el-date-picker>
        <span class="week-box">{{ getWeek(curWeek) }}</span>
      </div>
      <div class="search-button">
        <el-button type="primary" :icon="Search">搜索</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import { usersStore } from "@/stores/module/user";
import { timeFormatter, getWeek } from "@/utils/tools";
import { Refresh, Search } from "@element-plus/icons-vue";


const store = usersStore();
store.getUserInfos()
const { userInfo, name } = store

const goAddress = ref("");
const arriveAddress = ref("");
const tempAddress =  ref("");

const trainDate = ref(timeFormatter(new Date()));

console.log(userInfo.nickName, name)

const holidays = [
  "2023-10-01",
  "2023-10-02",
  "2023-10-03",
  "2023-10-04",
  "2023-10-05",
  "2023-10-06",
  "2023-10-07",
];
// 是否是假期
const isHoliday = ({ dayjs }:any) => {
  return holidays.includes(dayjs.format("YYYY-MM-DD"));
};
// 是否为预订
const isReserve = (cell:any) => {
  const timeDiffSecond =
    new Date(cell.dayjs).getTime() -
    new Date(timeFormatter(new Date())).getTime();
  const timeDiffDay = timeDiffSecond / (1000 * 60 * 60 * 24);
  return timeDiffDay;
};
// 禁止选择日期
const pickerOptions = (date:any) => {
  return (
    new Date(timeFormatter(date)).getTime() <
    new Date(timeFormatter(new Date())).getTime() || 
    isReserve({dayjs: date}) > 30
  );
};
// 获取星期
const curWeek = computed(() => {
  const weekStr = timeFormatter(trainDate.value, "d");
  return weekStr;
});

const addressExchange = () => {
  tempAddress.value = arriveAddress.value
  arriveAddress.value = goAddress.value
  goAddress.value = tempAddress.value
}

</script>

<style scoped lang="scss">
.train {
  width: 1380px;
  margin: auto;
  .search-box {
    display: flex;
    ::v-deep(.el-input__wrapper) {
      box-shadow: none !important;
      background-color: #f8f8f8;
      padding: 0;
      .el-input__inner {
        font-size: 18px;
        font-weight: bold;
      }
    }
    .destination {
      display: flex;
      background-color: #f8f8f8;
      position: relative;
      margin-right: 10px;
      border-radius: 8px;
      font-weight: bold;
      .go-box {
        padding: 10px 30px 0;
        border-right: 1px solid #ddd;
        box-sizing: border-box;
        & > div {
          margin-bottom: 5px;
          font-size: 16px;
        }
        ::v-deep(.el-input) {
          width: 220px;
        }
      }
      .arrive-box {
        padding: 10px 30px 0;
        box-sizing: border-box;
        & > div {
          margin-bottom: 5px;
          font-size: 16px;
        }
        ::v-deep(.el-input) {
          width: 220px;
        }
      }
      .icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        font-size: 24px;
        width: 24px;
        height: 24px;
        .el-icon {
          background-color: #fff;
          border: 1px solid #ddd;
          border-radius: 24px;
          cursor: pointer;
        }
      }
    }
    .time {
      flex: 1;
      background-color: #f8f8f8;
      padding: 10px 30px 0;
      margin-right: 10px;
      border-radius: 8px;
      font-weight: bold;
      & > div {
        margin-bottom: 5px;
        font-size: 16px;
      }
      ::v-deep(.el-input) {
        width: 150px;
      }
      .week-box {
        font-weight: bold;
        font-size: 16px;
      }
    }
    .search-button {
      width: 163px;
      margin-left: 20px;
      height: 78px;
      .el-button {
        width: 100%;
        height: 100%;
        font-size: 24px;
      }
    }
  }
  .time {
    .cell {
      height: 30px;
      padding: 3px 0;
      box-sizing: border-box;
      .text {
        width: 24px;
        height: 24px;
        display: block;
        margin: 0 auto;
        line-height: 24px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%;
      }
      &.current .text {
        background: #626aef;
        color: #fff;
      }
      .holiday {
        position: absolute;
        width: 6px;
        height: 6px;
        background: var(--el-color-danger);
        border-radius: 50%;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
  ::v-deep(.train-pop) {
    .el-date-picker {
      width: 385px;
      .el-picker-panel__content {
        width: 357px;
        .cell {
          height: 40px;
          .reserve {
            font-size: 12px;
            position: absolute;
            bottom: 0;
            left: 30%;
            color: #f63b2e;
          }
        }
      }
    }
    .disabled {
      .cell {
        background-color: #f8f8f8;
        color: #ccc;
        cursor: no-drop;
      }
    }
  }
}
</style>
